<template>
  <el-dialog
    :width="props.width"
    :title="props.title"
    :close-on-click-modal="false"
  >
    <div class="dialog-container">
      <div class="avatar">
        <el-upload
          ref="uploadRef"
          class="avatar-uploader"
          action="#"
          :limit="1"
          :show-file-list="false"
          :auto-upload="false"
          accept=".jpg, .jpeg, .png, .gif"
          :on-exceed="handleExceed"
          :on-change="handleChangeFile"
        >
          <el-avatar :src="imageUrl" :size="180">
            <img
              src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
              style="cursor: pointer"
            />
          </el-avatar>
        </el-upload>
      </div>
    </div>
    <template #footer>
      <div style="float: left">
        <el-button type="primary" @click="confirm()">提交修改</el-button>
      </div>
      <el-button @click="close()">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  UploadFile,
  UploadInstance,
  UploadProps,
  UploadRawFile,
} from "element-plus";
import { ref } from "vue";
import api from "@/utils";
import { ElMessage } from "element-plus/es";

export interface dialogProps {
  width?: string;
  title?: string;
  leftBtnAreaVisible?: boolean;
  previousDisabled?: boolean;
  nextDisabled?: boolean;
}

const props = withDefaults(defineProps<dialogProps>(), {
  width: "30%",
  title: "头像管理",
  leftBtnAreaVisible: false,
  previousDisabled: false,
  nextDisabled: false,
});

const imageUrl = ref(sessionStorage.getItem("imgPath"));

const emit = defineEmits<{
  (e: "close"): void;
  (e: "refreshHeadPortrait"): void;
}>();

// 关闭页面
const close = () => {
  emit("close");
};

const uploadRef = ref<UploadInstance>();

// 上传文件超过限制时的处理.
const handleExceed = (files: File[]) => {
  uploadRef.value?.clearFiles();
  uploadRef.value?.handleStart(files[0] as UploadRawFile);
};

let isChange = false;
const fileValue = ref({} as UploadRawFile);
// 上传文件发生改变.
const handleChangeFile: UploadProps["onChange"] = (uploadFile: UploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw as UploadRawFile);
  isChange = true;
  fileValue.value = uploadFile.raw as UploadRawFile;
};

const confirm = () => {
  if (!isChange) {
    ElMessage.warning({ message: "您并未更新头像" });
  } else {
    let formData = new FormData();
    formData.append("file", fileValue.value);
    api.http
      .upload("/system/upload-head-portrait", formData)
      .then((res) => {
        if (res.data.code === 202) {
          sessionStorage.setItem("imgPath", res.data.data);
          emit("close");
          emit("refreshHeadPortrait");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
</script>

<style lang="less" scoped>
.dialog-container {
  display: flex;
}

.avatar {
  margin: auto;
}
</style>

<style>
.avatar .avatar-uploader .el-upload {
  border: 2px dashed var(--el-border-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader .avatar-uploader-img {
  width: 178px;
  height: 178px;
}

.el-icon .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
